<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后台管理系统-HTML5后台管理系统</title>
    <meta name="keywords" content="设置关键词..."/>
    <meta name="description" content="设置描述..."/>
    <meta name="author" content="DeathGhost"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="javascript/jquery.js"></script>
    <script src="javascript/plug-ins/customScrollbar.min.js"></script>
    <script src="javascript/plug-ins/echarts.min.js"></script>
    <script src="javascript/plug-ins/layerUi/layer.js"></script>
    <script src="editor/ueditor.config.js"></script>
    <script src="editor/ueditor.all.js"></script>
    <script src="javascript/plug-ins/pagination.js"></script>
    <script src="javascript/public.js"></script>
    <script src="js/http.js"></script>
</head>
<body>
<div class="main-wrap">
    <div class="side-nav">
        <div class="side-logo">
            <div class="logo">
				<span class="logo-ico">
					<i class="i-l-1"></i>
					<i class="i-l-2"></i>
					<i class="i-l-3"></i>
				</span>
                <strong>后台管理</strong>
            </div>
        </div>

        <nav class="side-menu content mCustomScrollbar" data-mcs-theme="minimal-dark">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <i class="icon-columns"></i><a href="table.html">运营</a><i class="icon-angle-right"></i>
                        </dt>
                        <dd>
                            <a href="table.html">客户分析</a>
                        </dd>
                        <dd>
                            <a href="User.html">产品分析</a>
                        </dd>
                        <dd>
                            <a href="shop.html">商户查询</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </nav>

        <footer class="side-footer">© DeathGhost 版权所有</footer>

    </div>
    <div class="content-wrap">
        <header class="top-hd">
            <div class="hd-lt">
                <a class="icon-reorder"></a>
            </div>
            <div class="hd-rt">
                <ul>
                    <li>
                        <a href="#" target="_blank"><i class="icon-home"></i>前台访问</a>
                    </li>
                    <li>
                        <a><i class="icon-random"></i>清除缓存</a>
                    </li>
                    <li>
                        <a><i class="icon-user"></i>管理员:<em>DeathGhost</em></a>
                    </li>
                    <li>
                        <a><i class="icon-bell-alt"></i>系统消息</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="JsSignOut"><i class="icon-signout"></i>安全退出</a>
                    </li>
                </ul>
            </div>
        </header>
        <main class="main-cont content mCustomScrollbar">
            <div class="page-wrap">
                <!--开始::内容-->

                <div class="panel panel-default">
                    <div class="panel panel-default">
                        <div class="panel-hd">商户筛选</div>
                        <div class="panel-bd">
                            <div class="clear mt-20">
                                <div class="fr input-group">
                                    <input type="text" id="shopName" class="form-control" placeholder="输入商户名称以搜索"
                                           style="width:290px;"/>
                                    <button class="btn btn-secondary-outline" onclick="selectShopByName()">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <table class="table mb-15">
                    <thead>
                    <tr>
                        <th><input type="checkbox"/></th>
                        <th>序号</th>
                        <th>商户名称</th>
                        <th>地址</th>
                        <th>联系人</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="shop_content">

                    </tbody>
                </table>

                <div class="lt clear">
                    <div class="pagination fr"></div>
                </div>
                <!--开始::结束-->
            </div>

            <template id="template_shop">
                <tr class="cen">
                    <td id="{{shop_id}}"><input type="checkbox"/></td>
                    <td>{{shop_id}}</td>
                    <td>{{shop_name}}</td>
                    <td>{{shop_division}}</td>
                    <td>{{username}}</td>
                    <td>{{phone}}</td>
                    <td>
                        <a title="编辑" class="mr-5">编辑</a>
                        <a title="删除" href="javascript:void(0);" onclick="delect(this)">删除</a>
                    </td>
                </tr>
            </template>

            <script>
                //分页
                $(".pagination").createPage({
                    pageCount: 5,
                    current: 1,
                    backFn: function (p) {
                        console.log(p);
                    }
                });
            </script>

        </main>
    </div>
</div>

<script language="JavaScript">
    $(function () {
        addShop();
    });

    function addShop() {

        //发起ajax http请求获取到商品列表数据
        httpGet("/shop/getShop", showShopList);


        function showShopList(shopList) {


            //业务内容清空
            $("#shop_content").html("");

            var goodsListHtml = "";
            //获取模板
            var goodsTemplate = $("#template_shop").html();
   /*         shopList.forEach(item => {
                var goodsHtml = goodsTemplate
                    .replaceAll("{{shop_id}}", item.shop_id)
                    .replaceAll("{{shop_name}}", item.shop_name)
                    .replaceAll("{{phone}}", item.phone)
                    .replaceAll("{{username}}", item.username)
                    .replaceAll("{{shop_division}}", item.shop_division);

                //拼接HTML
                goodsListHtml += goodsHtml;
            });*/

            //填充html到指定位置
            $("#shop_content").html(goodsListHtml);
        }
    }
</script>

<script>

    //商户搜索功能
    function selectShopByName() {

        var shopNameVal = $("#shopName").val();

        var params = {
            shopName: shopNameVal
        };

        httpGetWithParams("/shop/getShopByName", params, showShop);

        function showShop(shopList) {

            //业务内容清空
            $("#shop_content").html("");

            var goodsListHtml = "";
            //获取模板
            var goodsTemplate = $("#template_shop").html();


           /* shopList.forEach(item =>{
                var goodsHtml = goodsTemplate
                    .replaceAll("{{shop_id}}", item.shop_id)
                    .replaceAll("{{shop_name}}", item.shop_name)
                    .replaceAll("{{phone}}", item.phone)
                    .replaceAll("{{username}}", item.username)
                    .replaceAll("{{shop_division}}", item.shop_division);
                //拼接HTML
                goodsListHtml += goodsHtml;
            });*/

            //填充html到指定位置
            $("#shop_content").html(goodsListHtml);
        }
    }

    function delect(obj) {

        var id = $(obj).parent().siblings().attr("id");


        var params = {
            shop_id: id
        };

        httpGetWithParams("/shop/delectShopById", params, delectShop);

        function delectShop() {
            window.alert("删除成功！");
            location.reload();
        }
    }


</script>


</body>
</html>
